<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js 常用指令的测试</title>
    <script src="vue.min.js"></script>
</head>
<body>
<!-- 实现在 body 区域显示一个名称 -->
<div id="app">
    <!--{{name}}--><!-- 相当于 MVVM 的 view（视图）-->
    <!-- <a href="http://www.xuecheng.com/vue_test/vue_02.html">
        <span v-text="name"></span>
     </a> -->
    <a v-bind:href="url"><span v-text="name"></span></a>
    <input type="text" v-model="num1"/>+
    <input type="text" v-model="num2"/>=
    <!--{{Number.parseInt(num1) + Number.parseInt(num2)}}-->
    <!--<span v-text="Number.parseInt(num1) + Number.parseInt(num2)"></span>-->
    <span v-text="result"></span>
    <!--v-text 解决差值表达式闪烁的问题-->
    <!--button><计算</button>-->
    <button v-on:click="change">计算</button>
    <div v-bind:style="{ fontSize:size + 'px' }">文字</div>
</div>
</body>
<script>
    // 编写 MVVM 中的 model 部分及 VM （ViewModel）部分
    var VM = new Vue({
        el: "#app", // 表示当前 vue 对象接管 app 的 div 区域
        data: {
            name: "加法计算", // 相当于是 MVVM 中的 Model 这个角色
            num1: 0,
            num2: 0,
            result: 0,
            url: "http://www.xuecheng.com/vue_test/vue_02.html",
            size: 33,
        },
        methods: {
            change: function () {
                this.result = Number.parseInt(this.num1) + Number.parseInt(this.num2);
                // alert("计算结果：" + this.result);
            }
        }
    });
    // nginx 启动的前提下，页面访问地址：http://www.xuecheng.com/vue_test/vue_02.html
</script>
</html>